<template>
  <!-- 搜索页 -->
  <div>
    <!-- 搜索栏 -->
    <van-search
      v-model="keyword"
      show-action
      placeholder="520礼包抢先领"
      @search="onSearch"
      @cancel="onCancel"
    />

    <div v-if="XianShi">
      <div class="lishiWai">
        <p class="lishi">历史记录<van-icon name="delete" @click="QIngChu" /></p>
        <!-- <span v-for="i in historyKeywordList" :key="i.id">{{ i }}</span> -->
        <van-tag
          plain
          type="primary"
          v-for="i in historyKeywordList"
          :key="i.id"
          @click="DIanJi(i)"
          >{{ i }}</van-tag
        >
      </div>

      <div class="remenWai">
        <p>热门搜索</p>
        <!-- <span v-for="item in hotKeywordList" :key="item.id">{{
        item.keyword
      }}</span> -->
        <van-tag
          plain
          type="primary"
          v-for="item in hotKeywordList"
          :key="item.id"
          @click="DIanJis(item.keyword)"
          :color="item.is_hot == 1 ? '#ad0000' : '#1989FA'"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
    <div v-else>
      <!-- 使用下拉菜单组件 -->
      <!-- 子传父的子组件自定义事件 fer-->
      <XiaLa
        :filterCategory="filterCategory"
        @fer="changeP"
        @fer2="changePl"
      ></XiaLa>
      <!-- 商品列表组件使用 -->
      <GoodsList :goodsList="goodsList"></GoodsList>
    </div>
  </div>
</template>

<script>
// 引入下拉菜单组件
import XiaLa from "@/components/XiaLa.vue";

// 引入商品搜索接口
import { getSouYeSouSuoData } from "@/utils/http";

// 引入搜索的搜索框数据的接口
import { getSouSuoSuJuData } from "@/utils/http";

// 引入清除历史记录的接口
import { getQIngCHuData } from "@/utils/http";

// 引入商品列表组件
import GoodsList from "@/components/GoodsList.vue";
export default {
  name: "SouSuo",
  data() {
    return {
      // value: "",
      keyword: "", //搜索词汇
      page: 1, //默认页数
      size: 10, //默认一页显示的个数
      order: "desc", //排列顺序，desc表示价格由高到低，asc表示价格由低到高
      categoryId: 0, //类别id，代表下拉菜单中的全部、居家 服装....等选项
      sort: "id", //可以是id或price
      goodsList: [], //商品列表数据
      filterCategory: [], //搜索页的下拉分类的所有类别
      historyKeywordList: [], //历史记录数组
      hotKeywordList: [], //热门搜索的数组
      XianShi: true, //定义一个默认的状态为true
    };
  },
  components: {
    XiaLa, //注册下拉菜单组件
    GoodsList, //商品列表组件
  },
  methods: {
    // 点击清除历史记录的事件
    QIngChu() {
      getQIngCHuData().then((res) => {
        // console.log(res);
        this.$toast.success("删除成功");
        this.historyKeywordList = res.data.errno;
      });
    },

    // 点击历史记录的事件
    DIanJi(i) {
      // console.log(i);
      this.keyword = i;
      this.onSearch();
    },
    // 点击热门搜索的事件
    DIanJis(item) {
      this.keyword = item;
      this.onSearch();
    },
    // 获取商品列表数据的函数
    getData() {
      let par = {
        keyword: this.keyword, //搜索词汇
        page: this.page, //默认页数
        size: this.size, //默认一页显示的个数
        order: this.order, //排列顺序，desc表示价格由高到低，asc表示价格由低到高
        categoryId: this.categoryId, //类别id，代表下拉菜单中的全部、居家 服装....等选项
        sort: this.sort, //可以是id或价格price
      };
      getSouYeSouSuoData(par)
        .then((res) => {
          // console.log(res);
          this.goodsList = res.data.data.data;
          this.filterCategory = res.data.data.filterCategory;
          //   接口获取的数据的类型和插件的的类型不一样需要转换一下
          // 将filterCategory中的name替换成text将id换成value;
          // 利用字符串的replace方法
          // console.log(
          //   JSON.parse(
          //     JSON.stringify(this.filterCategory)
          //       .replace(/name/g, "text")
          //       .replace(/id/g, "value")
          //   )
          // );
          this.filterCategory = JSON.parse(
            JSON.stringify(this.filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          );
        })
        .catch((e) => {});
    },
    onSearch() {
      //搜索

      this.getData();
      // 搜索框的数据
      this.XianShi = false;
    },
    onCancel() {
      //取消返货home页       返回上一页
      this.$router.go(-1);
    },
    // 子传父的事件价格的排序
    changeP(m) {
      // 切换价格排序的方法触发的事件
      // 这个m就是dese和asc
      // console.log(m);
      this.order = m;
      this.sort = "price";
      // 修改完以后重新调用获取列表数据的方法
      this.getData();
    },
    // 类别的选择
    changePl(n) {
      this.categoryId = n;
      this.sort = "id";
      // 修改完参数重新获取数据
      this.getData();
    },
  },
  created() {
    // 初始化调用获取列表的函数获取商品
    getSouSuoSuJuData().then((res) => {
      // console.log(res);
      this.historyKeywordList = res.data.data.historyKeywordList;
      this.hotKeywordList = res.data.data.hotKeywordList;
      // console.log(res);
    });
    this.getData();
  },
};
</script>

<style lang='less' scoped>
.lishiWai {
  background-color: #fff;
  padding: 2%;
  span {
    // color: #969799;
    padding: 3px;
    margin: 0 2px;
    font-size: 2px;
    // border: 1px solid;
  }
}
.lishi {
  font-size: 16px;
  // padding-top: 2%;
  display: flex;
  justify-content: space-between;
}
.remenWai {
  background-color: #fff;
  padding: 2%;
  span {
    // color: #969799;
    // padding: 3px;
    margin: 0 2px;
    font-size: 10px;
    // border: 1px solid;
  }
  p {
    font-size: 16px;
    padding-top: 2%;
    display: flex;
    justify-content: space-between;
  }
}
.van-tag--danger.van-tag--plain {
  color: #ee0a24;
}
</style>